<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2022-12-29 21:44:37
 * @LastEditors: badcandy 568197314@qq.com
 * @LastEditTime: 2023-02-21 22:07:20
 * @FilePath: /dcollege/src/views/message/chat/chat.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <var-style-provider :style-vars="styleVars">
    <div class="chats">
      <!-- 顶部导航栏 -->
      <var-app-bar
        color="#fff"
        text-color="#000"
        :elevation="false"
        title-position="center"
      >
        <template #left>
          <var-button
            @click.native="goBack"
            color="transparent"
            text-color="#000"
            round
            text
          >
            <var-icon name="chevron-left" :size="24" />
          </var-button>
        </template>

        <template #default>
          <div class="title">
            <span class="title-name">{{ friend.friendName }}</span>
            <span class="title-grade">19级软件1910班</span>
          </div>
        </template>

        <template #right>
          <var-button
            @click="right = true"
            class="btn-popup"
            size="mini"
            color="blue"
            text-color="#fff"
            round
          >
            <var-icon :size="13" name="dots-vertical" />
          </var-button>
        </template>
      </var-app-bar>

      <!-- 侧边弹出 -->
      <var-popup position="right" v-model:show="right">
        <div class="popup">
          <var-app-bar
            color="#ffffff"
            :elevation="false"
            text-color="#000"
            title-position="center"
          >
            <template #left>
              <var-button
                @click="right = false"
                color="transparent"
                text-color="#ffffff"
                round
                text
              >
                <var-icon color="#000" name="chevron-left" :size="24" />
              </var-button>
            </template>

            <template #default>
              <span>聊天消息{{ num }}</span>
            </template>
          </var-app-bar>

          <div class="cell">
            <!-- 头像 -->
            <div class="cell-avatar">
              <div class="avatar">
                <chatAvatar :avatar="friend.imgUrl" />
                <!-- 添加 -->
                <div class="chat-plus">
                  <var-icon color="rgb(159, 159, 159)" :size="35" name="plus" />
                </div>
              </div>
              <!-- <span class="avatar-check"
                >查看更多成员 <var-icon name="chevron-right"
              /></span> -->
            </div>

            <!-- 群设置 -->
            <!-- <div v-show="isShow" class="group-setting">
              <div class="setting-group-name">
                <span class="group-name">群聊名称</span>
                <span>{{ chat_group.group_name }}</span>
                <var-icon name="chevron-right"/>
              </div>
              <var-divider />
              <var-cell :border="true" title="群公告">
                <template #description>
                  {{ chat_group.notice }}
                </template>
                <template #extra>
                  <var-icon name="chevron-right"/>
                </template>
              </var-cell>
              <var-cell :border="true" title="群二维码">
                <template #extra>
                  <var-icon name="chevron-right"/>
                </template>
              </var-cell>
              <var-cell title="备注">
                <template #extra>
                  <var-icon name="chevron-right"/>
                </template>
              </var-cell>
            </div> -->

            <!-- 通用设置 -->
            <div class="default-setting">
              <var-cell title="查找聊天内容">
                <template #extra>
                  <var-icon name="chevron-right"/>
                </template>
              </var-cell>
            </div>

            <div class="default-setting">
              <var-cell :border="true" title="消息免打扰">
                <template #extra>
                  <var-switch v-model="chatStatus" />
                </template>
              </var-cell>
              <var-cell :border="true" title="置顶聊天">
                <template #extra>
                  <var-switch v-model="isTop" />
                </template>
              </var-cell>
              <var-cell title="保存到通讯录">
                <template #extra>
                  <var-switch v-model="isSave" />
                </template>
              </var-cell>
            </div>

            <div class="default-setting">
              <var-cell title="清空聊天记录">
                <template #extra>
                  <var-icon name="chevron-right"/>
                </template>
              </var-cell>
            </div>
          </div>
        </div>
      </var-popup>
      <!-- 聊天信息 -->
      <div class="chat-box">
        
      </div>
      <!-- 聊天框 -->
      <chatBox />
    </div>
  </var-style-provider>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getMessageByFriend, sendMessage } from "@/services/message";
const router = useRouter();
const route = useRoute();
const right = ref(false);
const num = ref("");
const chatStatus = ref(true);
const isTop = ref(true);
const isSave = ref(true);
const isShow = ref(false);
const timer = ref(null as unknown as number) // 定时器常量
// 样式定制
const styleVars = ref({
  "--popup-content-background-color": "rgb(244,245,249)",
  "--cell-font-size":'1rem',
});
interface chatFriend { 
  friendId: string;
  friendName: string;
  imgUrl?: string;
}
interface chatContent { 
  content: string;
  createTime: string;
  receiveId: string;
  sendId: string;
}
function goBack(): void {
  router.go(-1);
}

const friend = ref({} as chatFriend);
const content = ref([] as chatContent[]);

onMounted(() => {
  friend.value = JSON.parse(decodeURIComponent(route.query.friend)) as chatFriend;
  timer.value = setInterval(() => { 
    setTimeout(() => { 
      getMessageByFriend(friend.value.friendId).then(res => { 
        content.value = res.data.data as chatContent[];
      })
    }, 0)
  }, 1000)
})
onUnmounted(() => { 
  clearInterval(timer.value);
})
</script>

<style lang="less" scoped>
.chats {
  position: absolute;
  height: 100%;
  width: 100%;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-name {
  font-weight: bold;
  font-size: 1.2rem;
}
.title-grade {
  font-size: 0.6rem;
  color: #acacac;
}
.popup {
  width: 23.4375rem;
}
.cell {
  position: absolute;
  width: 100%;
}
.cell-avatar {
  position: relative;
  background: #fff;
  padding: 20px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0.625rem;
}
.avatar {
  display: grid;
  margin-bottom: 1.2rem;
  grid-auto-flow: row;
  grid-template-columns: repeat(5, 50px);
  column-gap: 1.25rem;
  grid-template-rows: 1fr;
  row-gap: 1.25rem;
}
.avatar-check {
  display: flex;
  justify-content: center;
  color: #acacac;
}
.chat-plus {
  height: 3.1rem;
  width: 3.1rem;
  border-style: dashed;
  border-width: 1px;
  border-color: rgb(159, 159, 159);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.default-setting{
  position: relative;
  background: #fff;
  width: 100%;
  margin-bottom: 0.625rem;
}
.group-setting{
  .default-setting();
}
.setting-group-name{
  display: flex;
  flex-direction: row;
  width: 100%;
  padding:10px 12px 10px 12px;
}
.group-name{
  flex: 1;
}
.chat-box {
  position:relative;
  padding-left: 10px;
  padding-right: 10px;
  overflow: auto;
}
</style>